<template>
	<view class="func-bar">
		<view class="func-contain">
			<view :class="like" @click="goPraise">
				<image class="icon" src="/static/img/common/like.png"></image>
				<text class="num">{{like | overNum}}</text>
			</view>
			<view class="comment" @click="toogleComment">
				<image class="icon" src="/static/img/common/comment.png"></image>
				<text class="num">{{comment | overNum}}</text>
			</view>
			<view class="share" @click="toastInfo">
				<image class="icon" src="/static/img/common/share.png"></image>
				<text class="num">{{share | overNum}}</text>
				<button v-if="goodid && token" class="share-btn" open-type="share" @click.stop></button>
			</view>
		</view>
		<view :class="['comment-mask', {'ac': showComment}]" @click.stop='toogleComment'>
			<view class="comment-box" @click.stop>
				<view class="title">
					<view class="empty"></view>
					<view class="num">（{{comment}}）条</view>
					<view class="close" @click='toogleComment'>
						<image src="/static/img/common/close.png"></image>
					</view>
				</view>
				<scroll-view class="comment-list" scroll-y="true" @scrolltolower='scrolltolower'>
					<view class="item" v-for="(item, index) in commentList" :key="index">
						<image class="avatar" :src="item.headimgurl"></image>
						<view class="userinfo">
							<view class="name-box">
								<text class="nickname">{{item.nick_name}}</text>
								<text class="time">{{item.create_time | toTime}}</text>
							</view>
							<view class="desc">{{item.content}}！</view>
						</view>
					</view>
					<view v-show="empty" class="empty">
						<empty></empty>
					</view>
					<view v-show="!empty" class="no-more">
						<load-more :status='loadStatus'></load-more>
					</view>
				</scroll-view>
				<view class="input-box">
					<input type="text" v-model="content" placeholder="请输入你的评论" />
					<view class="commit" @click='commitComment'>发送</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		isPraise,
		getCommentList,
		addComment
	} from '@/commen/js/config'
	import storage from '@/commen/utils/storage'
	import empty from '@/components/empty/empty'
	import loadMore from '@/components/uni-load-more/uni-load-more'
	import {
		toDate
	} from '@/commen/utils/utils'

	export default {
		data() {
			return {
				content: '', // 评论文字
				showComment: false, // 显示评论
				commentList: [], // 评论列表
				page: 1, // 评论列表页数
				requestKey: true, // 请求钥匙
				empty: false, // 是否为空
				loadStatus: 'more', // more loading noMore
				token: '' // 用户标识
			}
		},
		props: {
			goodid: {
				type: Number
			},
			index: {
				type: Number,
				default: -1
			},
			islike: {
				type: Boolean
			},
			like: {
				type: Number,
				default: 0
			},
			comment: {
				type: Number,
				default: 0
			},
			share: {
				type: Number,
				default: 0
			},
		},
		components: {
			loadMore,
			empty
		},
		filters: {
			// 数量超出
			overNum(num) {
				return num<10000 ? num : '1w+'
			},
			// 时间戳转换
			toTime(timeStamp) {
				const timeArr = toDate(timeStamp)
				return `${timeArr[0]}.${timeArr[1]}.${timeArr[2]} ${timeArr[3]}:${timeArr[4]}`
			}
		},
		watch: {
			// 监听变化刷新
			goodid(newValue, oldValue) {
				this.init()
				this.getCommentList()
				this.token = storage.get('token') || ''
			}
		},
		mounted() {
			this.token = storage.get('token') || ''
			this.getCommentList()
			this.listenerEvent()
		},
		methods: {
			// 初始化
			init() {
				this.page = 1
				this.requestKey = true
				this.empty = false
				this.commentList = []
			},
			// 获取评论列表
			async getCommentList() {
				if (!this.goodid) {
					this.empty = true
					return
				}
				this.loadStatus = 'loading'
				const params = {
					goods_id: this.goodid,
					page: this.page
				}
				const [err, res] = await getCommentList(params)
				if (res) {
					if (res.list.length == 0 && this.page == 1) {
						this.requestKey = false
						this.empty = true
						return
					} else if (res.list.length == 0 && this.page > 1) {
						this.requestKey = false
						this.loadStatus = 'noMore'
						return
					}
					this.commentList = this.commentList.concat(res.list)
					if (res.list.length < 15) {
						this.requestKey = false
						this.loadStatus = 'noMore'
						return
					}
					this.loadStatus = 'more'
				} else {
					this.empty = true
				}
			},
			// 提示
			toastInfo() {
				this.$toast('请先登录')
				setTimeout(() => {
					this.$open('/pages/common/login/login')
				}, 1500)
			},
			// 赞
			async goPraise() {
				if (!this.isLogin()) return
				if (!this.goodid) return
				const params = {
					token: storage.get('token'),
					goods_id: this.goodid
				}
				const [err, res] = await isPraise(params)
				if (res && res.code == 200 && res.status == 1) {
					this.$emit("praise", {
						isLike: !this.islike,
						index: this.index
					})
				}
			},
			// 提交评论
			async commitComment() {
				if (!this.isLogin()) return
				const params = {
					token: storage.get('token'),
					goods_id: this.goodid,
					content: this.content
				}
				const [err, res] = await addComment(params)
				if (res && res.code == 200) {
					this.$toast(res.msg)
				}
				this.content = ''
				this.$emit('comment', {
					index: this.index
				})
			},
			// 打开/关闭评论模态框
			toogleComment() {
				if (!this.goodid) return
				this.showComment = !this.showComment
			},
			// 滚动到底部
			scrolltolower() {
				if (!this.requestKey) return
				this.page++
				this.getCommentList()
			},
			// 是否登录
			isLogin() {
				let isLogin = true
				if (!storage.get('token')) {
					this.$toast('请先登录')
					setTimeout(() => {
						this.$open('/pages/common/login/login')
					}, 1500)
					isLogin = false
				}
				return isLogin
			},
			// 监听自定义事件
			listenerEvent() {
				uni.$on('refreshFunc', () => {
					this.init()
					this.getCommentList()
				})
				uni.$on('updateToekn', () => {
					this.token = storage.get('token') || ''
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';

	.func-bar {
		@include box-w($page-w);

		.func-contain {
			@include box(100%, 70rpx);
			@include flex-row();

			&>view {
				position: relative;
				@include flex-col();
				padding: 0 29rpx;

				image {
					@include square(44rpx);
				}

				text {
					@include font-set($font-c, $color-d);
				}

				.share-btn {
					@include square();
					position: absolute;
					left: 0;
					top: 0;
				}
			}
		}

		.comment-mask {
			@include mask();
			top: 100%;
			transition: all .5s;

			&.ac {
				@include mask();
			}

			.comment-box {
				@include bottom();
				@include box-w(100%, $bg-c);

				.title {
					@include box(100%, 122rpx);
					@include flex-row();
					padding-bottom: 20rpx;

					.empty,
					.close {
						@include square(102rpx);
						@include flex-row();

						image {
							@include square(44rpx);
						}
					}

					.num {
						@include font-set($font-a, $color-c);
						flex-grow: 1;
						text-align: center;
						padding-top: 70rpx;
					}
				}

				.comment-list {
					@include box-w(100%);
					max-height: 800rpx;
					padding: 0 40rpx;

					.no-more {
						margin-top: 30rpx;
					}

					.empty {
						padding: 30rpx 0;
					}

					.item {
						@include flex-row(center, flex-start);
						margin-top: 36rpx;

						&:last-of-type {
							margin-bottom: 60rpx;
						}

						.avatar {
							@include circle(64rpx);
							box-shadow: 0 6rrpx 12px rgba(0, 0, 0, 0.16);
						}

						.userinfo {
							width: 580rpx;
							margin-left: 26rpx;

							.name-box {
								@include flex-row(space-between);

								.nickname {
									@include font-set($font-b, $color-g);
								}

								.time {
									@include font-set($font-c, $color-f);
									align-self: flex-end;
								}
							}


							.desc {
								word-wrap: break-word;
								margin-top: 15rpx;
								@include font-set($font-b, $color-c);
								@include text-wrap();
							}
						}
					}
				}

				.input-box {
					@include box(100%, 80rpx);
					@include flex-row();

					input {
						@include box(628rpx, 100%);
						@include font-set($font-b, $color-g);
						border: 2rpx solid $bg-f;
						border-right: 0;
						padding-left: 28rpx;
					}

					.commit {
						@include box(124rpx, 80rpx);
						@include flex-row();
						@include font-set($font-b, $color-h);
						border: 2rpx solid $bg-e;
						border-right: 0;
					}
				}
			}
		}
	}
</style>
